<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
        <el-input
          clearable
          v-model="formInline.name"
          placeholder="请输入操作管理员"
          size="mini"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="onSubmit"
          size="mini"
          icon="el-icon-search"
          >查找</el-button
        >
      </el-form-item>
    </el-form>
    <div class="tables">
      <template>
        <el-table border :data="tableData" style="width: 100%">
          <el-table-column prop="admin" label="操作管理员" align="center">
          </el-table-column>
          <el-table-column prop="ip" label="ip地址" align="center">
          </el-table-column>
          <el-table-column prop="updateTime" label="操作时间" align="center">
          </el-table-column>
          <el-table-column
            align="center"
            prop="type"
            label="标签"
            filter-placement="bottom-end"
          >
            <template slot-scope="scope">
              <el-tag
                size="mini"
                :type="scope.row.type === 1 ? 'primary' : 'success'"
                disable-transitions
                >{{ scope.row.type === 1 ? "安全操作" : "敏感操作" }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="action" label="操作动作" align="center">
          </el-table-column>
          <el-table-column
            align="center"
            prop="status"
            label="操作状态"
            filter-placement="bottom-end"
          >
            <template slot-scope="scope">
              <el-tag
                size="mini"
                :type="scope.row.status ? 'success' : 'primary'"
                disable-transitions
                >{{ scope.row.status ? "成功" : "失败" }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="result" label="操作结果" align="center">
          </el-table-column>
          <el-table-column prop="comment" label="备注信息" align="center">
          </el-table-column>
        </el-table>
      </template>
      <div class="page">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="get.page"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          :page-size="get.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getList } from "@/api/systemm/log";
import { start } from "nprogress";
export default {
  data() {
    return {
      flag: true,
      formLabelWidth: "120px",
      dialogVisible: false,
      form: {},
      tableData: [],
      formInline: {},
      total: 0,
      get: {
        page: 1,
        limit: 20,
        name: "",
        sort: "add_time",
        order: "desc",
      },
    };
  },
  created() {
    this.getdata();
  },
  methods: {
    // 数据接口
    getdata() {
      getList(this.get).then((res) => {
        // console.log(res);
        if ((res.data.errmsg = "成功")) {
          this.tableData = res.data.list;
          this.total = res.data.total;
          // console.log(this.tableData);
        }
      });
    },
    // 查询
    onSubmit() {
      this.get.page = 1;
      this.get.name = this.formInline.name;
      this.getdata();
    },
    //分页
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.get.limit = val;
      this.getdata();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.get.page = val;
      this.getdata();
    },
    // 操作类别格式化
    typetx(a, b, c) {
      if (c == 1) {
        return "安全操作";
      } else {
        return "敏感操作";
      }
    },
    // 操作状态格式化
    statustx(a, b, c) {
      if (c) {
        return "成功";
      } else {
        return "失败";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-table td,
::v-deep .el-table th {
  padding: 4px 0px;
}
.el-table {
  font-size: 12px;
}
.page {
  margin-top: 40px;
  display: flex;
  justify-content: left;
}
</style>